import 'package:flutter/material.dart';
import 'package:fsharing/core/models/store_categories.dart';
import 'package:fsharing/core/viewmodels/pages/store/store_categories_model.dart';
import 'package:fsharing/core/viewmodels/view_model.dart';
import 'package:fsharing/ui/pages/store/store_category_tab_item_page.dart';
import 'package:fsharing/ui/widgets/background_container.dart';
import 'package:fsharing/ui/widgets/round_back_button.dart';
import 'package:provider/provider.dart';

class StoreCategoryPage extends StatelessWidget {
  final int storeId;

  StoreCategoryPage({
    Key key,
    @required this.storeId,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => StoreCategoriesModel(
        Provider.of(context, listen: false),
        storeId,
        null,
        1,
      ),
      child: BackgroundContainer(
        child: Scaffold(
          appBar: AppBar(
            leading: RoundBackButton(),
            title: Text('商品分类'),
          ),
          body: Consumer<StoreCategoriesModel>(
            builder: (context, model, child) {
              switch (model.viewState) {
                case ViewState.busy:
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                case ViewState.error:
                  return Center(
                    child: Text(model.errorMessage),
                  );
                case ViewState.success:
                  return _SuccessWidget();
                default:
                  return Container();
              }
            },
          ),
        ),
      ),
    );
  }
}

class _SuccessWidget extends StatefulWidget {
  const _SuccessWidget({
    Key key,
  }) : super(key: key);

  @override
  __SuccessWidgetState createState() => __SuccessWidgetState();
}

class __SuccessWidgetState extends State<_SuccessWidget> {
  PageController _pageController;
  var _selectedIndex = 0;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    StoreCategoriesModel model = Provider.of(context, listen: false);
    var list = model.storeCategories.childCategoriesV2.first?.children ?? [];
    return Material(
      color: Color(0xFF545460),
      child: Row(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/store/img_category_unselected.png'),
                fit: BoxFit.fill,
              ),
            ),
            width: 75.5,
            child: ListView.builder(
              itemBuilder: (context, index) {
                return _CategoryItemWidget(
                  selected: _selectedIndex == index,
                  category: list[index],
                  onTap: () {
                    _pageController.jumpToPage(index);
                  },
                  onDoubleTap: () {
                    Navigator.of(context).pop(list[index]);
                  },
                );
              },
              itemCount: list.length,
            ),
          ),
          Expanded(
            child: PageView.builder(
              controller: _pageController,
              physics: NeverScrollableScrollPhysics(),
              onPageChanged: (value) {
                setState(() {
                  _selectedIndex = value;
                });
              },
              itemBuilder: (context, index) {
                return StoreCategoryTabItemPage(
                  storeId: model.storeId,
                  parentCategoryId: list[index].id,
                );
              },
              itemCount: list.length,
            ),
          ),
        ],
      ),
    );
  }
}

class _CategoryItemWidget extends StatelessWidget {
  final bool selected;
  final Category category;
  final Function onTap;
  final Function onDoubleTap;

  _CategoryItemWidget({
    Key key,
    @required this.selected,
    @required this.category,
    @required this.onTap,
    @required this.onDoubleTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Container(
        alignment: Alignment.center,
        padding: EdgeInsets.all(8),
        decoration: BoxDecoration(
          // color: selected ? Theme.of(context).accentColor : Colors.transparent,
          image: DecorationImage(
            image: AssetImage(selected
                ? 'assets/images/store/img_category_selected.png'
                : 'assets/images/store/img_category_unselected.png'),
            fit: BoxFit.fill,
          ),
        ),
        child: Text(category.name),
      ),
      onTap: onTap,
      onDoubleTap: onDoubleTap,
    );
  }
}
